<template>
	<view>
		<home v-if="index == 'home'"></home>
		<message v-else-if="index == 'message'"></message>
		<collect v-else-if="index == 'collect'"></collect>
		<user v-else-if="index == 'user'"></user>
		<view class="foot-h"></view>
		<view class="cu-bar tabbar bg-white foot">
			<view class="action" :class="index=='home' ? 'text-green' : 'text-gray'" @click="onClickBar('home')">
				<view class="cuIcon-homefill"></view>
				舞台
			</view>
			<view class="action" :class="index=='message' ? 'text-green' : 'text-gray'" @click="onClickBar('message')">
				<view class="cuIcon-mark">
					<view v-if="$comment > 0 || $goods_like>0" class="cu-tag badge">{{$comment+$goods_like}}</view>
				</view>
				消息
			</view>
			<view class="action add-action" @click="onClickBar('scan')">
				<button class="cu-btn cuIcon-scan bg-green shadow"></button>
				扫码
			</view>
			<view class="action" :class="index=='collect' ? 'text-green' : 'text-gray'" @click="onClickBar('collect')">
				<view class="cuIcon-like"></view>
				收藏
			</view>
			<view class="action" :class="index=='user' ? 'text-green' : 'text-gray'" @click="onClickBar('user')">
				<view class="cuIcon-my"></view>
				我的
			</view>
		</view>

		<view class="cu-modal" :class="show?'show':''" v-if="goods.id">
			<view class="cu-dialog">
				<view class="bg-img" :style="'background-image: url('+goods.pic[0]+');height:200px;'">
					<view class="cu-bar justify-end text-white">
						<view class="action" @click="show=false">
							<text class="cuIcon-close "></text>
						</view>
					</view>
				</view>

				<view class="bg-white padding-sm">
					<view class="padding-bottom-sm text-left">{{goods.title}}</view>
					<view class="flex align-center">
						<view class="flex align-center flex-sub">
							<image class="cu-avatar round" :src="goods.user.avatar" mode="aspectFill"></image>
							<view class="flex-sub padding-lr-xs">{{goods.user.nickname}}</view>
							<view class="text-price text-red">
								{{goods.price}}
							</view>
						</view>
						<view :class="goods.is_like ? 'text-red':'text-gray'" class="lg cuIcon-appreciatefill"></view>
					</view>
				</view>
				<view class="cu-bar bg-white solid-top">
					<view class="action margin-0 flex-sub" @click="toGoods()">查看</view>
					<view class="action margin-0 text-green flex-sub solid-left" @click="toCollect()">收藏</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import home from '../home/home.vue'
	import message from '../message/message.vue'
	import collect from '../collect/collect.vue'
	import user from '../user/user.vue'
	import GoodsApi from "@/api/goods"
	import UserApi from "@/api/user"
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			home,
			message,
			collect,
			user
		},
		data() {
			return {
				index: 'home',
				goods: {},
				show: false,
			}
		},
		onLoad(option) {
			if (option.tab) {
				this.onClickBar(option.tab)
			}
		},
		computed: {
			...mapState(['$comment', '$goods_like'])
		},
		methods: {
			onClickBar(val) {
				if (val == 'scan') {
					this.scanCode()
				} else {
					this.index = val
					uni.navigateTo({
						url: '/pages/index/index?tab=' + val
					});
				}
			},
			scanCode() {
				UserApi.jssdk({
					url: window.location.href
				}).then((res) => {
					jWeixin.config({
						debug: false,
						appId: res.appId, // 必填，公众号的唯一标识
						timestamp: res.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.nonceStr, // 必填，生成签名的随机串
						signature: res.signature, // 必填，签名
						jsApiList: res.jsApiList // 必填，需要使用的JS接口列表
					});
					jWeixin.ready(() => {
						jWeixin.scanQRCode({
							needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
							scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
							success: (qrRes) => {
								if (qrRes.resultStr) {
									GoodsApi.scan(qrRes.resultStr).then((res) => {
										this.goods = res;
										this.show = true;
									})
								}
							}
						});
					});
				})
			},
			toGoods() {
				this.show = false;
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + this.goods.id
				});
			},
			toCollect() {
				GoodsApi.addCollect({
					goods_id: this.goods.id
				}).then((res) => {
					uni.showToast({
						title: "收藏成功",
						icon: 'none'
					});
					this.show = false;
				})
			},
		}
	}
</script>

<style>

</style>
